<template>
  <a-modal
    :zIndex='zIndex'
    :title="$t('第三方核销')"
    :width="width"
    :visible="visible"
    switchFullscreen
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :okText="$t('保存')"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
    v-drag>

    <a-spin :spinning="confirmLoading">
      <a-form-model class="batchForm" :model="dataForm" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('第三方渠道')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="channel">
              <j-dict-select-tag type="list" v-model="dataForm.channel" dictCode="bis_goods_third.channel" :placeholder="$t('请选择第三方渠道')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('第三方商品编码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thirdCode">
              <a-input v-model="dataForm.thirdCode" :placeholder="$t('请输入第三方商品编码')"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  export default {
    name: 'BisGoodsThirdModal',
    components: {
    },
    data () {
      return {
        zIndex:1002,
        dataForm:{},
        width: 600,
        visible: false,
        confirmLoading: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           channel: [
              { required: true, message: this.$t('请输入第三方渠道')},
           ],
           thirdCode: [
              { required: true, message: this.$t('请输入第三方商品编码')},
           ],
        },
      }
    },
    methods: {
      edit() {
        this.visible = true
        this.dataForm={}
      },
      handleOk() {
        this.$emit('ok',this.dataForm)
        this.close()
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.visible = false
      }
    }
  }
</script>
<style>
  .batchForm .ant-form-item-label{
    width: 30%;
  }
  .batchForm .ant-form-item-control-wrapper{
    width: 62.5%;
  }
</style>